<template>
  <div class="login-box">
    <div class="headline">
      <img src="@/assets/login/log.png">
    </div>
    <div class="login">

      <!-- <div class="echart" id="main" :style="{ float: 'left', width: '100%', height: '400px' }"></div> -->
      


    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Login",
  data() {
    return {
      name: "张雪",
      xData: ["2020-02", "2020-03", "2020-04", "2020-05"], //横坐标数据
      yData: [30, 132, 80, 134] //纵坐标数据，与横坐标对应
    };
  },
  watch: {

  },
  mounted() {
    this.initEcharts();
  },
  created() {


  },
  methods: {

    initEcharts() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '5000','5100','5200', '5300', '5400', '5500', '5600', '5700', '5800','5900',
            '6000','6100','6200', '6300', '6400', '6500', '6600', '6700', '6800','6900',
        
        ]
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120, 145, 120, 125, 60, 62, 70,180,160,150,
              170, 145, 130, 145, 145, 132, 120,110,90,180
            ],
            type: 'line',
            areaStyle: {}
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.login-box {

  height: calc(100%);
  background-size: cover;
}

.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 80px);
  width: 100%;
  // background-image: url("../assets/login/background.png");
  background-size: cover;
}

.headline {
  height: 80px;

  img {
    height: 80px;
  }
}

.headimg {
  margin-top: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    height: 88px;
    text-align: center;
  }
}

.title {
  margin: 5px auto 30px auto;
  font-size: 30px;
  text-align: center;
  color: #FFFFFF;
}

.login-form {
  border-radius: 6px;
  width: 700px;
  height: 100%;
  padding: 25px 25px 5px 25px;
  background: rgba(0, 41, 73, 0.898);

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 38px;
}


.body {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .body-button {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 40px;


    .login-t {
      cursor: pointer;
      color: #AAAAAA;
      /* color: #2CA6E0; */
      margin: 0 auto;
      border-bottom: solid #fff 1px;
      text-align: center;
      padding-bottom: 5px;
    }

    .login-blue {
      color: #2CA6E0;
      font-weight: 700;
      border-bottom: solid #2CA6E0 3px;
    }

    .login-1 {
      width: 140px;
    }

    .login-2 {
      width: 160px;
    }

    .login-3 {
      width: 80px;
    }

  }

  .body-login {
    width: 380px;
  }
}
</style>
